<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="isNew ? ('Add Replication Task' | translate) : ('Edit Replication Task' | translate)"
  [loading]="isLoading()"
></ix-modal-header>
<mat-card>
  <mat-card-content>
    <form class="ix-form-container" (submit)="onSubmit()">
      <div class="fieldsets">
        <ix-replication-general-section
          [replication]="existingReplication"
        ></ix-replication-general-section>

        <ix-replication-transport-section
          [replication]="existingReplication"
          [transport]="generalSection().form.value.transport"
        ></ix-replication-transport-section>

        <ix-replication-source-section
          [replication]="existingReplication"
          [direction]="generalSection().form.value.direction"
          [nodeProvider]="sourceNodeProvider"
        ></ix-replication-source-section>

        <ix-replication-target-section
          [replication]="existingReplication"
          [nodeProvider]="targetNodeProvider"
          [allowsCustomRetentionPolicy]="!usesNameRegex"
        ></ix-replication-target-section>

        <ix-replication-schedule-section
          [replication]="existingReplication"
        ></ix-replication-schedule-section>
      </div>

      @if (eligibleSnapshotsMessage) {
        <div
          class="eligible-snapshots"
          [class.danger]="isEligibleSnapshotsMessageRed"
          >
          {{ eligibleSnapshotsMessage | translate }}
        </div>
      }

      <div class="form-actions">
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="!isFormValid"
          (click)="onSubmit(); $event.preventDefault();"
        >{{ 'Save' | translate }}</button>
        @if (isNew) {
          <button
            mat-button
            type="button"
            ixTest="switch-to-wizard"
            (click)="onSwitchToWizard()"
          >{{ 'Switch To Wizard' | translate }}</button>
        }
      </div>
    </form>
  </mat-card-content>
</mat-card>
